<template>
	<view>
		<swiper style="height: 240px;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in imgList" :key="index">
				<view class="swiper-item">
					<image :src="item.img" mode="" style="width: 100%;"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="title-tip">
			<view v-for="(item, index) in navList" :key="index">
				<image :src="item.img" mode=""></image>
				<view class="title">{{item.text}}</view>
			</view>
		</view>
		<image style="width: 100%;" src="../../static/images/home/recommend_bg.jpg" mode=""></image>
		<view>
			<view class="tab-control">
				<view v-for="(item, index) in tabList" :key="index" :class="{ active: tabCurrentIndex === index }" @click="tabClick(index)">
					<text>{{ item.text }}</text>
				</view>
			</view>
			<view class="tab-content">
				<view class="list" v-for="(item, index) in tabList" :key="index" v-show="tabCurrentIndex === index">
					<view class="list-wrapper" v-for="(good,index) in item.goodsList" :key="index">
						<scroll-view scroll-y="true">
							<image :lazy-load="true" class="img-style" :src="good.show.img" mode=""></image>
						</scroll-view>
						<text class="good-title">{{good.title}}</text>
						<view class="good-price">
							<view>￥{{good.price}}</view>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more status="more" @clickLoadMore="clickNodeMore"></uni-load-more>
			<!-- 回到顶部 -->
			<image class="back-top" src="../../static/images/common/top.png" mode="" @click="toTop" v-show="flag"></image>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	export default {
		components:{ uniLoadMore },
		data() {
			return {
				// 图片列表
				imgList: [
					{
						img: 'https://s10.mogucdn.com/mlcdn/c45406/180926_45fkj8ifdj4l824l42dgf9hd0h495_750x390.jpg'
					},
					{
						img: 'https://s10.mogucdn.com/mlcdn/c45406/180926_31eb9h75jc217k7iej24i2dd0jba3_750x390.jpg'
					},
					{
						img: 'https://s10.mogucdn.com/mlcdn/c45406/180919_3f62ijgkj656k2lj03dh0di4iflea_750x390.jpg'
					}
				],
				navList: [
					{
						img: 'https://s10.mogucdn.com/mlcdn/c45406/180913_036dli57aah85cb82l1jj722g887g_225x225.png',
						text: '十点抢券'
					},
					{
						img: 'https://s10.mogucdn.com/mlcdn/c45406/180913_25e804lk773hdk695c60cai492111_225x225.png',
						text: '好物特卖'
					},
					{
						img: 'https://s10.mogucdn.com/mlcdn/c45406/180913_387kgl3j21ff29lh04181iek48a6h_225x225.png',
						text: '内购福利'
					},
					{
						img: 'https://s10.mogucdn.com/mlcdn/c45406/180913_8d4e5adi8llg7c47lgh2291akiec7_225x225.png',
						text: '初秋上新'
					}
				],
				tab1: 0,
				tabList: [
					{
						text: '流行',
						type: 'pop',
						goodsList: []
					},
					{
						text: '新款',
						type: 'sell',
						goodsList: []
					},
					{
						text: '精选',
						type: 'new',
						goodsList: []
					}
				],
				tabCurrentIndex: 0,
				pageNum: 1,
				flag: false
			}
		},
		created () {},
		onLoad() {
			this.getGoodsList('pop');
		},
		methods: {
			tabClick(index) {
				this.tabCurrentIndex = index;
				this.getGoodsList(this.tabList[index].type);
			},
			// 获取数据
			getGoodsList (type) {
				uni.request({
					url: 'http://123.207.32.32:8000/api/x6/home/data',
					data: { type: type, page: this.pageNum },
					success: res => {
						this.tabList[this.tabCurrentIndex].goodsList = res.data.data.list;
					}
				})
			},
			// 返回顶部
			toTop () {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100
				})
			},
			// 是否显示返回顶部按钮
			onPageScroll (e) {
				if (e.scrollTop > 30) {
					this.flag = true;
				} else {
					this.flag = false;
				}
			}
		},
		// 页面滚动到底部时触发 实现懒加载
		onReachBottom () {
			this.pageNum ++;
			let type = this.tabList[this.tabCurrentIndex].type;
			uni.request({
				url: 'http://123.207.32.32:8000/api/x6/home/data',
				data: { type: type, page: this.pageNum },
				success: res => {
					let listData = res.data.data.list;
					this.tabList[this.tabCurrentIndex].goodsList = this.tabList[this.tabCurrentIndex].goodsList.concat(res.data.data.list);
				}
			})
		}
	}
</script>

<style>
	.title-tip {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10px;
	}
	.title-tip image {
		width: 68px;
		height: 68px;
	}
	.title-tip .title{
		font-size: 14px;
	}
	.tab-control {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 35px;
		padding: 4px 0 10px;
	}
	.tab-control view {
		flex: 1;
		align-self: center;
		text-align: center;
		font-size: 16px;;
	}
	.active {
		color: #ff5777;
	}
	.active text {
		border-bottom: 2px solid #ff5777;
		padding: 0 5px 5px;
	}
	.list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	.list-wrapper {
		width: 49%;
		overflow: hidden;
	}
	.good-title {
		font-size: 16px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		display: block;
	}
	.img-style {
		width: 100%;
	}
	.tab-content {
		margin: 5px 5px 0;
	}
	.good-price {
		font-size: 14px;
		color: #ff5777;
		text-align: center;
		margin: 5px 0;
	}
	.fixed {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin-top: 45px;
		background: #fff;
		z-index: 1;
	}
	/* 返回顶部 */
	.back-top {
		width: 90rpx;
		height: 90rpx;
		position: fixed;
		right: 0;
		bottom: 120rpx;
	}
</style>
